<template>
  <!-- 主界面布局 -->
  <lay-layout class="example">
    <lay-side style="min-width: 350px; min-height: calc(100vh - 60px)">
      <div id="vv">
        <div style="min-width: 350px; height: 90px">
          <div class="vv789">
            <span>当班:欧阳张三</span>
            <span>班次:A班</span>
            <span>会员:张*丰</span>
          </div>
          <div class="vv789">
            <span style="width: 66%; background-color: #fff"
              >单号:{{ dbInfo.dbid }}</span
            >
            <span>挂单:2</span>
          </div>
          <div class="vv789">
            <span>上单合计:9999</span>
            <span>上单实收:100000</span>
            <span>上单找零:111</span>
          </div>
        </div>
        <div>
          <lay-table
            style="height: calc(100vh - 150px); max-height: calc(100vh - 150px)"
            size="sm"
            :columns="columns"
            :data-source="SalesOrder.detail"
          >
            <template #barcode="{ data }">
              <span @click="barcode_c(data)" style="color: rgb(255, 104, 34)">
                {{ data.barcode }}
              </span>
            </template>
            <!--数量点击-->
            <template #number="{ data }">
              <div
                style="width: 100%; height: 100%; border-bottom: 1px solid"
                @click="changeQuantilty(data)"
              >
                <span>{{ data.number }}</span>
              </div>
            </template>
            <template #operator="{ data }">
              <lay-button type="warm" fluid @click="deleteProductMethod(data)">
                <lay-icon type="layui-icon-close"></lay-icon>
              </lay-button>
            </template>
            <template v-slot:footer>
              <lay-input
                v-model="QR_val"
                :allow-clear="true"
                keyboard="true"
                @input="changeQR_val"
                placeholder="请输入条码"
              >
                <!-- <template #suffix>
                  <lay-icon
                    type="layui-icon-keyboard"
                    @click="QR_keyboard"
                  ></lay-icon>
                </template> -->
                <template v-slot:append>
                  <span @click="QR_event">确认</span>
                </template>
              </lay-input>
            </template>
          </lay-table>
        </div>
      </div>
    </lay-side>

    <lay-side class="side2" style="max-width: 70px !important">
      <div class="cc">
        <lay-ripple><span>退货</span></lay-ripple>
        <lay-ripple><span>开钱箱</span></lay-ripple>
        <lay-ripple><span>开新单</span></lay-ripple>
        <lay-ripple><span>挂取单</span></lay-ripple>
        <lay-ripple><span>历史单</span></lay-ripple>
        <lay-ripple><span>打折</span></lay-ripple>
        <lay-ripple><span>赠送</span></lay-ripple>
        <lay-ripple><span>查会员</span></lay-ripple>
        <lay-ripple><span>查商品</span></lay-ripple>
        <lay-ripple><span>打印开关</span></lay-ripple>
        <lay-ripple><span>----</span></lay-ripple>
        <lay-ripple><span>----</span></lay-ripple>
        <lay-ripple><span>··更多</span></lay-ripple>
      </div>
    </lay-side>

    <lay-layout>
      <lay-header>
        <div class="dd">
          <lay-ripple><span>按分类</span></lay-ripple>
          <lay-ripple><span>常用</span></lay-ripple>
          <lay-ripple><span>按促销</span></lay-ripple>
          <lay-ripple><span>无条码</span></lay-ripple>
          <lay-ripple><span>高销量</span></lay-ripple>
          <lay-ripple><span>高库存</span></lay-ripple>
          <lay-ripple><span>预设1</span></lay-ripple>
        </div>
      </lay-header>
      <lay-body>
        <div style="width: 100%">
          <div class="tab_a" style="height: calc(100vh - 180px)">
            <lay-tab
              type="card"
              v-model="tab_a_model"
              style="padding: 0; margin: 0"
            >
              <lay-tab-item title="选项一" id="1">
                <div class="p_list">
                  <div
                    class="p_main"
                    v-for="p in products"
                    :key="p.goods_dbid"
                    @click="selectProduct(p)"
                  >
                    <div class="p_main_header">
                      {{ p.goods_name }}
                    </div>
                    <div class="p_main_body">
                      <div class="p_main_body_img">
                        <img src="/src/assets/imgs/bskl.jpg" alt="" />
                      </div>
                      <div class="p_main_body_fotter">
                        <i class="layui-icon">&#xe65e;</i>
                        <span>{{ p.prc_sale }}</span
                        >/
                        <span>{{ p.unit }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </lay-tab-item>
              <lay-tab-item title="选项二" id="2">
                <div class="body2">
                  <div class="vc">
                    <lay-ripple>
                      <span class="vc1">1234567895</span>
                      <span class="vc2">我是可是可是可是可口可乐250G/瓶</span>
                      <span class="vc3">
                        <span class="vc3a">￥4.5</span>
                        <span class="vc3b">瓶</span>
                      </span>
                    </lay-ripple>
                  </div>
                  <div class="vc">
                    <lay-ripple>
                      <span class="vc1">1234567895</span>
                      <span class="vc2">我是可是可是可是可口可乐250G/瓶</span>
                      <span class="vc3">
                        <span class="vc3a">￥4.5</span>
                        <span class="vc3b">瓶</span>
                      </span>
                    </lay-ripple>
                  </div>
                  <div class="vc">
                    <lay-ripple>
                      <span class="vc1">1234567895</span>
                      <span class="vc2">我是可是可是可是可口可乐250G/瓶</span>
                      <span class="vc3">
                        <span class="vc3a">￥4.5</span>
                        <span class="vc3b">瓶</span>
                      </span>
                    </lay-ripple>
                  </div>
                  <div class="vc">
                    <lay-ripple>
                      <span class="vc1">1234567895</span>
                      <span class="vc2">我是可是可是可是可口可乐250G/瓶</span>
                      <span class="vc3">
                        <span class="vc3a">￥4.5</span>
                        <span class="vc3b">瓶</span>
                      </span>
                    </lay-ripple>
                  </div>
                </div>
              </lay-tab-item>
            </lay-tab>
          </div>
        </div>
      </lay-body>
      <lay-footer>
        <div class="btn_head">
          <lay-button size="lg" type="danger" @click="click_LI('打印')"
            >打印</lay-button
          >
          <lay-button size="lg" type="danger" @click="click_LI('测试')"
            >测试</lay-button
          >
          <lay-button size="lg" type="danger" @click="click_LI('更多')"
            >···更多</lay-button
          >
        </div>
        <div class="btn_foot">
          <lay-button size="lg" type="danger" @click="settlement"
            >结算</lay-button
          >
        </div>
      </lay-footer>
    </lay-layout>
  </lay-layout>
  <lay-footer>
    <div class="footer_d">
      <div>
        <span style="display: block">--</span>
        <span style="display: block">--</span>
        <span style="display: block">--</span>
      </div>
      <div>
        <span style="display: block">--</span>
        <span style="display: block">--</span>
        <span style="display: block">--</span>
      </div>
      <div style="text-align: right">
        <span style="display: block"
          >xp收银管理系统@ 服务热线:13800138000 / 010-1234567</span
        >
        <span style="display: block">--</span>
        <span style="display: block">--</span>
      </div>
    </div>
  </lay-footer>

  <lay-layer
    v-model="quantiltyVisible"
    :shade="false"
    :area="['400px']"
    :btn="quntiltyAction"
    title="数量"
  >
    <div class="t_quantilty_input">
      <lay-row space="10">
        <lay-col md="8"
          ><div class="grid-demo">
            <span>数量：</span>
          </div></lay-col
        >
        <lay-col md="12"
          ><div class="grid-demo">
            <lay-input
              v-model="selectedProduct.number"
              keyboard="true"
              @input="quantiltyChange"
              placeholder="请输入数量"
            ></lay-input></div
        ></lay-col>
      </lay-row>
      <!-- <lay-row space="10">
        <lay-col md="4"><lay-button>输入数量</lay-button></lay-col>
        <lay-col md="18" mdOffset="6" mdPull="6">
          
        </lay-col>
      </lay-row> -->

      <keyboard
        :transitionTime="'0.5s'"
        :maxQuantify="10"
        :showKeyboard="showKeyboard"
        :mode="'num'"
        float
        :blurHide="true"
      >
      </keyboard>
    </div>
  </lay-layer>
  <keyboard
    :transitionTime="'0.5s'"
    :maxQuantify="10"
    :showKeyboard="showKeyboard1"
    :mode="'num'"
    float
    :blurHide="true"
  >
  </keyboard>

  <!--结算model-->
  <lay-layer
    v-model="settlementVisible"
    :shade="false"
    :area="['800px', '600px']"
    title="收银结算"
  >
    <settlementDailog
      v-if="settlementVisible"
      :orderInfo="SalesOrder.detail"
      :dbInfo="dbInfo"
    ></settlementDailog>
  </lay-layer>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { toRaw } from "@vue/reactivity";
import { layer } from "@layui/layui-vue";
import { io } from "socket.io-client";

import { getNewDbid as getNewDbidApi, saveOrder } from "@/apis/cashierApi";

import XEUtils from "xe-utils";

import settlementDailog from "./settlementDailog";

import keyboard from "@/components/keyboard/keyboardIndex.vue";

const socket = null;
// const socket = io("http://localhost:17521", {
//   transports: ["websocket"],
//   auth: {
//     token: "", // 在此处填入你 client 设置的 token，缺省可留空
//   },
// });

const showKeyboard = ref(false);
const showKeyboard1 = ref(false);
const quantiltyVisible = ref(false); //数量弹窗
const settlementVisible = ref(false); //结算弹框

const dbInfo = ref({ dbid: "000000000000000000" }); //预下单信息,后台获取

//结算回调事件
const settlementAction = ref([
  {
    text: "确定",
    callback: () => {
      console.log("结算");
      settlementVisible.value = false;
    },
  },
  {
    text: "取消",
    callback: () => {
      console.log("取消");
      settlementVisible.value = false;
    },
  },
]);

//删除某个商品
const deleteProductMethod = (product) => {
  console.log("删除商品", product);
  layer.confirm("是否要删除该商品？", {
    btn: [
      {
        text: "是",
        callback: (id) => {
          deleteProduct(product);
          layer.close(id);
        },
      },
      {
        text: "否",
        callback: (id) => {
          layer.close(id);
        },
      },
    ],
  });
};

//数量弹出框回调事件
const quntiltyAction = ref([
  {
    text: "确定",
    callback: () => {
      console.log("修改数量", selectedProduct.value.number);
      //商品数量为零是要考虑是否要删除商品还是取消输入操作
      if (selectedProduct.value.number == 0) {
        layer.confirm("数量为0，是否要删除该商品？", {
          btn: [
            {
              text: "是",
              callback: (id) => {
                deleteProduct(selectedProduct.value);
                layer.close(id);
              },
            },
            {
              text: "否",
              callback: (id) => {
                // layer.msg("坐着看");
                //将原来的商品数量还原
                selectedProduct.value.number =
                  selectedProduct.value.oldQuantilty;
                layer.close(id);
              },
            },
          ],
        });
      } else {
        //计算商品金额
        computerAllMount(selectedProduct.value);
      }
      quantiltyVisible.value = false;
    },
  },
  {
    text: "取消",
    callback: () => {
      quantiltyVisible.value = false;
    },
  },
]); //修改数量回调方法

//计算商品总金额
const computerAllMount = (p) => {
  SalesOrder.value.detail.map((item) => {
    if (item.goods_dbid == p.goods_dbid) {
      item.amount = XEUtils.multiply(p.number, p.prc_sale);
      item.number = p.number;
    }
  });
  //修改库存
  // products.value.map((item) => {
  //   if (item.id == p.id) {
  //     item.inventoryNum = XEUtils.subtract(item.inventoryNum, p.quantilty);
  //   }
  // });
  selectedProduct.value = null;
};

//删除商品
const deleteProduct = (p) => {
  console.log("删除", p);
  //1.删除购物车列表
  SalesOrder.value.detail = SalesOrder.value.detail.filter(
    (item) => item.goods_dbid != p.goods_dbid
  );
  //2.商品列表库存还原
  // products.value.map((item) => {
  //   if (item.id == p.id) {
  //     item.inventoryNum = XEUtils.add(p.inventoryNum, p.oldQuantilty);
  //   }
  // });
  //3.将选中商品清空
  selectedProduct.value = null;
};

const selectedProduct = ref(null);

const products = ref([
  {
    goods_dbid: 1, //商品id
    barcode: "111111111", //条码
    goods_name: "可口可乐",
    prc_sale: 2.5, //原价
    prc_sale_actual: 2.4, //零售价
    unit_pack: "A", //是否大单位
    in_code: "111111", //录入码
    unit: "听",
    remark: "备注",
    img: "https://img10.360buyimg.com/n7/jfs/t1/114101/1/1035/122068/5d3333e0E23380449/0",
  },
  {
    goods_dbid: 2, //商品id
    barcode: "22222222", //条码
    goods_name: "百事可乐",
    prc_sale: 3, //原价
    prc_sale_actual: 2.5, //零售价
    unit_pack: "A", //是否大单位
    in_code: "2222222", //录入码
    unit: "听",
    remark: "备注",
    img: "https://img10.360buyimg.com/n7/jfs/t1/114101/1/1035/122068/5d3333e0E23380449/0",
  },
]);

//选项卡tab_a
const tab_a_model = ref("1");

// 静默打印项目数据
const globalThis = ref({
  connect: false, //连接状态
  clientInfo: {}, //客户系统信息
  printerList: [], //打印机列表
});

// 监听返回-客户系统信息
// socket.on("clientInfo", (res) => {
//   globalThis.value.clientInfo = res;
//   console.log("客户系统信息", res);
// });

// 监听返回-打印机列表
// socket.on("printerList", (res) => {
//   console.log("打印机列表", res);
//   globalThis.value.printerList = res;
// });

// 监听返回-连接接通
// socket.on("connect", () => {
//   globalThis.value.connect = true;
//   console.log("连接接通");
// });
// // 监听返回-连接断开
// socket.on("disconnect", (res) => {
//   globalThis.value.connect = false;
//   console.log("连接断开", res);
// });

// //监听返回-打印回调-成功
// socket.on("success", (res) => {
//   console.log(res);
//   console.log("打印回调-success");
// });
// //监听返回-打印回调-失败
// socket.on("error", (res) => {
//   console.log(res);
//   console.log("打印回调-error");
// });

// 主动获取
const printerList = () => {
  socket.emit("getClientInfo"); //客户端信息
  socket.emit("refreshPrinterList"); //请求刷新打印机列表
};

// 点击
const click_LI = (res) => {
  if (res == "打印") {
    console.log("点击了-打印");
    printerList();
  } else if (res == "测试") {
    console.log("点击了-测试");
    let html = "";
    html =
      "" +
      print_db.value.html_header +
      print_db.value.html_body +
      print_db.value.html_footer; //打印的html字符串
    console.log(
      print_db.value.html_header +
        print_db.value.html_body +
        print_db.value.html_footer
    );
    console.log(html);
    let templateId = "1"; //模板id
    let printer = "XP-58"; //打印机名称
    let pageSize = { height: 80 * 1000, width: 48 * 1000 }; //
    if (globalThis.value.connect) {
      socket.emit("news", {
        html, //打印的html字符串
        templateId, //模板id
        printer, //打印机名称
        pageSize, //打印纸张大小 { height: 80 * 1000, width: 60 * 1000 } 可为空，缺省默认使用打印机默认纸张
      });
    } else {
      console.log("未连接客户端！");
      window.open("hiprint://");
    }
  } else {
  }
};

const QR_val = ref("条码"); //条码输入框-绑定值
// const QR_ref = ref({}); //条码输入框-绑定焦点

// 列配置
const columns = [
  // { title: "行", width: "50px", type: "number" },
  {
    title: "条码",
    align: "center",
    width: "80px",
    key: "barcode", //barcode
    customSlot: "barcode",
    totalRow: false,
  },
  {
    title: "品名",
    align: "center",
    width: "auto",
    key: "goods_name",
    totalRow: false,
  },
  {
    title: "数量",
    align: "center",
    width: "50px",
    key: "number",
    customSlot: "number",
    totalRow: true,
  },
  {
    title: "金额",
    align: "center",
    width: "80px",
    key: "amount",
    totalRow: true,
  },
  {
    title: "操作",
    width: "40px",
    customSlot: "operator",
    key: "operator",
  },
];

//点击商品列表  添加到购物车
const selectProduct = (product) => {
  //添加商品,通过id判断是否存在于购物车,存在就数量加一,不存在就添加一行,(是否需要验证库存,并提示)
  // if (product.inventoryNum < 1) {
  //   layer.msg("库存不足", { icon: 5 });
  //   return;
  // }
  // if (product.inventoryNum < 3) {
  //   layer.msg("库存不足,请及时补充", { icon: 7 });
  // }

  const selectedList = SalesOrder.value.detail;
  //判断是否在购物车中
  let flag = selectedList.some((item) => {
    return item.goods_dbid == product.goods_dbid;
  });
  if (selectedList.length < 1 || !flag) {
    product.number = 1;
    product.amount = XEUtils.multiply(product.prc_sale, product.number);
    selectedList.push(product);
  } else {
    selectedList.map((item) => {
      if (item.goods_dbid == product.goods_dbid) {
        item.number++;
        item.amount = XEUtils.multiply(item.prc_sale, item.number);
      }
    });
  }
  // product.inventoryNum--;

  console.log("selectedList", SalesOrder.value.detail);
};
//点击修改数量表格触发
const changeQuantilty = (data) => {
  selectedProduct.value = { ...data, oldQuantilty: data.number };
  quantiltyVisible.value = true;
};
//修改数量触发事件
const quantiltyChange = (val) => {
  /**
   * 1.提示不能为0
   * 2.为空默认设置为0
   * 3.不能超过库存
   */
  if (!val) {
    layer.msg("数量不能为空", { icon: 5 });
    selectedProduct.value.number = 0;
  } else if (val.startsWith("0")) {
    selectedProduct.value.number = parseInt(val, 10); // 第二个参数10表示基数是十进制
  }

  console.log("quantiltyChange", selectedProduct.value);
  // 所有数量
  // const all = XEUtils.add(
  //   selectedProduct.value.oldQuantilty,
  //   selectedProduct.value.inventoryNum
  // );
  // if (val > all) {
  //   layer.msg("库存不足", { icon: 5 });
  //   //将剩余+已选中的才是所有
  //   selectedProduct.value.quantilty = all;
  // } else {
  //   }
  selectedProduct.value.number = val;
};

//点击键盘的值
const clickKey = (key) => {
  // console.log("key-->>",key);
};
//点击键盘时数字的值
const clickNumber = (key) => {
  // console.log("key-->>",key);
};

// 订单数据
const SalesOrder = ref({
  main: "",
  detail: [],
});
//条码输入框-绑定值
const changeQR_val = () => {
  if (QR_val.value.length > 9) {
    layer.msg("条码长度为9位,请查询后再输入!", { icon: 5 });
    QR_val.value = QR_val.value.substring(0, 9);
  }
};

// 条码输入框-绑定值-事件
function QR_event() {
  console.log("QR", QR_val.value);
  //1.查询所有商品,是否存在条码
  const product = products.value.find((item) => {
    return item.barcode == QR_val.value;
  });

  if (!product) {
    layer.msg("条码不存在,请查询后再输入!", { icon: 5 });
    QR_val.value = "";
  } else {
    //2.添加到购物车
    selectProduct(product);
  }
  // Add();
}

// 弹出键盘
function QR_keyboard() {
  console.log("弹出键盘");
}

const openCallback = (html) => {
  layer.open({
    title: "标题",
    isHtmlFragment: true,
    content: print_db.value.html_header + html + print_db.value.html_footer,
    min: (id) => {
      // console.log(`最小化:${id}`)
    },
    full: (id) => {
      // console.log(`最大化:${id}`)
    },
    restore: (id) => {
      // console.log(`重置:${id}`)
    },
    success: (id) => {
      // console.log(`成功:${id}`)
    },
    end: (id) => {
      // console.log(`销毁:${id}`)
    },
    close: (id) => {
      // console.log(`关闭:${id}`)
    },
    beforeClose: (id) => {
      // console.log(`关闭前置:${id}`)
    },
    moveStart: (id) => {
      // console.log(`拖拽开始:${id}`)
    },
    moving: (id) => {
      // console.log(`拖拽中:${id}`)
    },
    moveEnd: (id) => {
      // console.log(`拖拽结束:${id}`)
    },
  });
};
// 打印数据
const print_db = ref({
  html_header: "<h4 style='text-align: center;'>页头</h4><br>", //页头
  html_body: "",
  html_footer: "<br><h5 style='text-align: center;'>页脚</h5>", //页脚
});

// 结算按钮-点击
const settlement = async () => {
  //点结算按钮,需要先保存到后端
  const params = {
    type: "A1",
    operation: "A",
    dbid: dbInfo.value.dbid,
    sign: dbInfo.value.sign,
    remark: "单据备注88",
    goods_db: SalesOrder.value.detail,
  };
  const { code, db, msg } = await saveOrder(params);

  if (code == 200) {
    settlementVisible.value = true;
  } else {
    layer.msg(msg, { icon: 5 });
  }
  // let html = "";
  // let rs = "";
  // SalesOrder.value.detail.forEach((item, index) => {
  //   console.log("数组行", index, item);
  //   rs =
  //     index +
  //     1 +
  //     "、" +
  //     item.barcode +
  //     "-" +
  //     item.name +
  //     "-" +
  //     item.number +
  //     "-" +
  //     item.money +
  //     "<br>";
  //   html = html + rs;
  //   rs = "";
  // });
  // print_db.value.html_body = html;
  // openCallback(html);
  // console.log(print_db.value);
};
// 条码点击
function barcode_c(res) {
  console.log("条码点击", res);
  Del(res);
}

// 删除行
const Del = (res) => {
  console.log("删除行", res);
  layer.confirm("确定删除此条数据？" + res.goods_dbid, {
    title: res.barcode + " " + res.goods_name,
    shadeClose: true,
    btn: [
      {
        text: "确定",
        callback: () => {
          SalesOrder.value.detail.forEach((item, index, array) => {
            if (item.goods_dbid === res.goods_dbid) {
              SalesOrder.value.detail.splice(index, 1);
            }
          });
          layer.closeAll();
        },
      },
      {
        text: "取消",
        callback: () => {
          layer.closeAll();
        },
      },
    ],
  });
};
document.onselectstart = new Function("event.returnValue=false"); //禁止鼠标选中文字
document.oncontextmenu = new Function("event.returnValue=false"); //禁止鼠标右键
// 监听键盘按键
document.addEventListener("keydown", function (e) {
  console.log("按键", e.key);
  // if (e.key == "F12") {
  // e.preventDefault(); // 如果按下键F12,阻止事件
  // }

  if (e.key == "ArrowDown") {
    QR_val.value = ""; //条码输入框-绑定值
    // QR_ref.value.focus({}); //条码输入框-绑定焦点
  }
});

document.addEventListener("mousemove", updateMousePosition); //监听鼠标移动
window.addEventListener("mousedown", handleMousedown); //监听鼠标按下
window.addEventListener("mouseup", handleMouseup); //监听鼠标抬起
// window.addEventListener('keydown', handlekeydown)//监听键盘按下
function updateMousePosition(event) {
  // console.log("gfffffffffff");
  // mousePosition.x = event.clientX;
  // mousePosition.y = event.clientY;
}
function handleMousedown(e) {
  if (e.button == 0) {
    // console.log('鼠标左键按下')
  }
  if (e.button == 1) {
    // console.log('鼠标滚动键按下')
  }
  if (e.button == 2) {
    // console.log('鼠标右键按下')
  }
  // console.log("坐标", e.pageX, e.pageY)
}

function handleMouseup(e) {
  if (e.button == 0) {
    // console.log('鼠标左键抬起')
  }
  if (e.button == 1) {
    // console.log('鼠标滚动键抬起')
  }
  if (e.button == 2) {
    // console.log('鼠标右键抬起')
  }
  // console.log("坐标", e.pageX, e.pageY)
}
function handlekeydown(e) {
  console.log("监听键盘按下", e.key);
}

const initPage = async () => {
  const params = {
    operator: "test",
  };
  const res = await getNewDbidApi(params);
  console.log("res", res);
  const { code, db, msg } = res;
  if (code == 200) {
    dbInfo.value = db;
  } else {
    layer.msg(msg, { icon: 5 });
  }
};

// 生命周期钩子
onMounted(() => {
  // QR_ref.value.focus({}); //条码输入框-绑定焦点
  QR_val.value = ""; //条码输入框-绑定值
  initPage();
});
</script>

<style lang="less" scoped>
* {
  /* 禁选中文字 */
  user-select: none;
  -ms-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  padding: 0;
  margin: 0;
}

/* 滚动条 */
::-webkit-scrollbar {
  width: 6px;
  height: 8px;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
  background-color: #b3b3b3;
}

.example .layui-footer,
.example .layui-header {
  line-height: 60px;
}

.example .layui-side {
  display: flex;
  /* background: #36cc61; */
  justify-content: center;
}

.example .layui-body {
  display: flex;
  /* background: #5FB878; */
}

.body2 {
  display: flex;
  overflow-y: auto;
  overflow-x: hidden;
  height: calc(100vh - 252px);
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
}

.body2 .vc {
  background: rgb(95, 107, 216) !important;
  width: 132px;
  height: 80px;
  margin: 0 0 4px 4px;
  padding: 0 4px;
  border-radius: 4px;
}

.body2 .vc span {
  background: rgb(95, 107, 216) !important;
}

.body2 .vc .vc1 {
  display: block;
  background: rgb(238, 173, 234) !important;
  height: 20px;
  line-height: 20px;
  text-align: center;
}

.body2 .vc .vc2 {
  background: rgb(185, 185, 189) !important;
  height: 40px;
  display: block;
}

.body2 .vc .vc3 {
  display: flex;
  background: rgb(95, 107, 216) !important;
  height: 20px;
  line-height: 20px;
}

.body2 .vc .vc3a {
  background: rgb(169, 170, 172) !important;
  flex-grow: 1;
}

.body2 .vc .vc3b {
  background: rgb(100, 103, 133) !important;
  flex-grow: 1;
  text-align: center;
}

.vv789 {
  display: flex;
  display: -webkit-flex;
  padding: 0 0 0 6px;
  line-height: 30px;
  justify-content: space-between;
  overflow-y: auto;
  overflow-x: hidden;
}

.vv789 span {
  width: 32%;
  background: rgb(199, 168, 155);
}

.cc {
  display: flex;
  height: calc(100vh - 64px);
  padding-top: 2px;
  overflow-y: auto;
  overflow-x: hidden;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  align-content: flex-start;
}

.cc span {
  display: grid;
  width: 60px;
  height: 45px;
  margin: 2px 0;
  color: #ffffff;
  background: #ff5722 !important;
  justify-content: center;
  align-content: center;
  border-radius: 4px;
}

.dd {
  display: grid;
  overflow-y: hidden;
  overflow-x: auto;
  grid-template-columns: repeat(auto-fill, 80px);
  grid-template-rows: repeat(auto-fill, 60px);
  grid-row-gap: 4px;
  grid-column-gap: 4px;
  min-width: 550px;
}

.dd span {
  display: grid;
  background: #ff5722;
  align-items: center;
  justify-content: center;
  align-content: center;
}

.footer_d {
  display: flex;
  background-color: #d8bdbd;
  padding: 0 10px;
  width: 100%;
}

.footer_d div {
  flex-grow: 1;
}

.p_list {
  display: flex;
  flex-flow: wrap;
  justify-content: space-around;
  .p_main {
    width: 200px;
    height: 180px;
    margin-bottom: 10px;
    border: 1px solid #ff5722;
    border-radius: 5px;

    .p_main_header {
      text-align: center;
      line-height: 20px;
      background: #ffbca7;
      font-size: 16px;
      font-weight: 600;
      font-family: fangsong;
      // width: 200px; /* 设置元素的宽度 */
      width: 100%;
      white-space: nowrap; /* 不换行 */
      overflow: hidden; /* 控制溢出部分的处理方式 */
      text-overflow: ellipsis; /* 显示省略号 */
    }
    .p_main_body {
      width: 100%;
      height: calc(100% - 20px);
      .p_main_body_img {
        height: calc(100% - 20px);
        width: 100%;
        img {
          height: 100%;
          width: 100%;
        }
      }
      .p_main_body_fotter {
        width: 100%;
        height: 20px;
        background-color: #ffbca7;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: 600;
        font-family: fangsong;
        span {
          margin: 0 3px;
        }
      }
    }
  }
}
.layui-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .layui-btn {
    padding: 0 15px;
  }
  .btn_foot {
    margin-right: 20px;
  }
}
.t_quantilty_input {
  width: 100%;
  height: 80px;
  line-height: 80px;
  text-align: center;
}
</style>
